<!--增删改查的基本操作，设计到element-ui 中的(el-table , el-button,el-dialog, el-form) -->
<template>
  <div class="enterprise-list">
    <div style="height: 60px">
      <el-button type="primary" @click="addData" style="margin: 5px;float: right">新增</el-button>
      <el-button type="primary" @click="addPlc" style="margin: 5px;float: right">管理Plc</el-button>
    </div>
    <el-table
      stripe
      height="800"
      highlight-current-row
      @current-change="handleCurrentChange"
      :data="dataList"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="企业名称"
        width="350"
        prop="enterprise_name"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="联系人员"
        prop="contact_person"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="联系电话"
        prop="contact_phone_number"
      >
      </el-table-column>
      <el-table-column
        align="center"
        width="200"
        label="操作"
        prop="handler"
      >
        <template slot-scope="{row}">
          <span @click="editClick(row)"><svg-icon class="handler-icon" icon-class="edit"/></span>
          <span @click="deleteUser(row.enterprise_id)"><svg-icon class="handler-icon" icon-class="right"/></span>
        </template>
      </el-table-column>
    </el-table>
    <enterprise-form ref='enterprise_from_dialog'/>
  </div>
</template>

<script>
  import EnterpriseForm from './EnterpriseForm'

  export default {

    name: "EnterpriseList",
    components: {EnterpriseForm},
    methods: {
      queryData(){
        let me = this;
        //查询
        this.$axios.post('enterpriseRoutes', {
          action_type: 'enterpriseQuery'
        }).then(function (response) {
          me.dataList = response.data.data;
          return {success : true}
        });
      },
      //编辑
      editClick(record) {
        let formDate = JSON.parse(JSON.stringify(record));//由于vue双向绑定的缘故，form表单中数据变换会营销到表格中的数据同时变换，因此这里需要进行一次转换操作避免绑定情况出现
        this.$refs.enterprise_from_dialog.setForm(formDate);
      },
      //删除
      deleteUser(enterprise_id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let me = this;
          this.$axios.post('enterpriseRoutes',{
            action_type: 'enterpriseDelete',
            enterprise_id:enterprise_id,
          }).then(function (response) {
            if(response.data.success) me.$message({type: 'success',message: '删除成功!'});
            else me.$message({type: 'error',message: '删除失败!'});
            me.queryData();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //添加
      addData() {
        //调用html里面的ref
        this.$refs.enterprise_from_dialog.setForm();
      },
      //添加plc
      addPlc() {
        if(this.currentRow){
          this.$router.push({name: 'plcDeviceList', params: {enterprise_id: this.currentRow.enterprise_id}});//push是跳转页面 params传值过去
        }else{
          alert('请选择需要添加plc设备的企业')
        }

      },
      handleCurrentChange(val) {
        this.currentRow = val;
      }
    },
    data() {
      return {
        dataList : [],
        currentRow : null
      }
    },


    created() {
      this.queryData();
    },

  }
</script>

<style lang="scss" scoped>
  .enterprise-list {
    background-color: #fff;
    .male {
      color: #36a3f7;
      font-size: 15px;
    }
    .female {
      color: #f49bda;
      font-size: 15px;
    }
    .status-test {
      color: #36a3f7;
      cursor: pointer;
      &:hover {
        font-weight: bold;
        color: #f4516c;
        font-size: 16px;
      }
    }
    .handler-icon {
      color: #bf71b4;
      margin-right: 5px;
      cursor: pointer;
      font-size: 18px;
      &:hover {
        font-weight: bold;
        color: #40c9c6;
        font-size: 25px;
      }
    }
    .star-icon-red {
      color: #fe2511;
    }
    .star-icon-orange {
      color: #fea466;
    }
    .star-icon-yellow {
      color: #fef558;
    }
    .star-icon-yellow-green {
      color: #e6fe86;
    }
    .star-icon-green {
      color: #8ffe48;
    }
    .star-icon-gary {
      color: #8a8a8a;
    }
  }
</style>
